import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { DNavBar, DLookImages, DModal } from '@/components'
import { AtButton } from 'taro-ui'
import http from '@/api'
import './userdetail.scss'

export default class UserDetail extends Component {

    constructor(props) {
        super(props)
        this.state = {
            status: 0,
            userinfo: {
                name: '',
                telphone: '',
                enterform: '',
                city: '',
                addre: "",
                type: '',

            },
            carurl: [],
            userighturl: '',
            userlefturl: '',
            companycar: {
                itemStatus: false,
                itemUrl: ''
            },
            isModal:false
        }
    }


    componentWillMount() {
        let { id = 1 } = this.$router.params
        this.getUserDetail(id)
    }

    getUserDetail(id) {
        http.userDetail(id).then(data => {
            if (!data) {
                return
            }
            let _userinfo = ['imName', 'imPhone', 'entName', 'entDis', 'entAddr', 'entAtt']
            let { userinfo, carurl, userighturl, userlefturl } = this.state
            Object.keys(userinfo).map((item, i) => {
                userinfo[item] = data[_userinfo[i]]
            })

            data.fileList.map(item => {
                if (item.cfType === '1') {
                    carurl = item.cfFileUrl
                }
                if (item.cfType === '2') {
                    userighturl = item.cfFileUrl
                }
                if (item.cfType === '3') {
                    userlefturl = item.cfFileUrl
                }
            })
            this.setState({
                status: +data.imIsAppro,
                userinfo,
                carurl,
                userighturl,
                userlefturl
            })
        })
    }
    onLookHandle(url) {
        if (window.bridge) {
            let _images = [], i = 0
            _images.push(url)
            window.bridge.callHandler('previewPhoto', { "index": i, "images": _images }, function responseCallback() { })
        } else {
            this.setState({
                companycar: {
                    ...this.state.companycar,
                    itemStatus: true,
                    itemUrl: url
                }
            })
        }
    }

    onLookItem() {
        this.setState({
            companycar: {
                ...this.state.companycar,
                itemStatus: false,
                itemUrl: ''
            }
        })
    }
    
    handleRecall(){
        //撤回审核
        this.setState({
            isModal:true
        })
    }
    handleCancel(){
        this.setState({
            isModal:false
        })
    }
    handlerConfirm(){
        //撤回
        this.handleCancel()
        this.recallEmployeeAppro()
    }
    recallEmployeeAppro(){
        http.recallEmployeeAppro().then(res=>{
            if(!res){
                return
            }
            Taro.showToast({
                title: '已撤回审核',
                duration: 800,
                mask: true
            }).then(() => {
                setTimeout(() => {
                    Taro.navigateBack({
                        delta: 1
                    })
                }, 1000)
            })
        })
    }
    render() {
        const {
            status,
            userinfo,
            companycar,
            carurl,
            userighturl,
            userlefturl,
            isModal
        } = this.state
        return (
            <View className='b_userdetail'>
                <DNavBar title='员工认证'></DNavBar>
                <View className='b_userdetail__box'>
                    {
                        <View className="b_userdetail__tips">
                            <Text>请耐心等待，企业管理员正在审核您的申请</Text>
                        </View>
                    }
                    <View className="b_userdetail__info">
                        <View className="item_title">
                            <Text className="item_title__left">个人姓名</Text>
                            <Text className="item_title__right">{userinfo.name || '---'}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">联系方式</Text>
                            <Text className="item_title__right">{userinfo.telphone || '---'}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">企业名称</Text>
                            <Text className="item_title__right">{userinfo.enterform || '---'}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">所在城市</Text>
                            <Text className="item_title__right">{userinfo.city || '---'}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">公司地址</Text>
                            <Text className="item_title__right">{userinfo.addre || '---'}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">公司性质</Text>
                            <Text className="item_title__right">{userinfo.type || '---'}</Text>
                        </View>
                    </View>
                </View>
                <View className='b_userdetail__images'>
                    <Text className='b_userdetail__images_title'>资料图片</Text>
                    <View className="b_userdetail__images_enterpris">
                        <View className='b_userdetail__images_enterpris_item'>
                            <Text className='item_title'>个人名片</Text>
                            <Image src={carurl}  className='item_image item__image' onClick={this.onLookHandle.bind(this, carurl)}></Image>
                        </View>
                        <View className="b_userdetail__images_enterpris_item">
                            <Text className="item_title">法人身份证</Text>
                            <View className="item_image__box">
                                <View className="item_image__firstchild">
                                    <Image src={userighturl} className='item_image item_bigimage' onClick={this.onLookHandle.bind(this, userighturl)}></Image>
                                    <Text className="item_image__text">正面(头像)</Text>
                                </View>
                                <View>
                                    <Image src={userlefturl} className='item_image item_bigimage' onClick={this.onLookHandle.bind(this, userlefturl)}></Image>
                                    <Text className="item_image__text">背面(国徽)</Text>
                                </View>
                            </View>
                        </View>
                    </View>
                
                </View>
                <View className='b_userdetail__footer'>
                    {
                    <AtButton className='item_btn b_userdetail__btn' onClick={this.handleRecall.bind(this)}>撤回审核</AtButton>
                    }
                </View>
                <DModal
                    isShow={isModal}
                    title='提示'
                    text='确定要撤回审核吗？'
                    firstbtn='取消'
                    lastbtn='确定'
                    onCancel={this.handleCancel.bind(this)}
                    onFirst={this.handleCancel.bind(this)}
                    onLast={this.handlerConfirm.bind(this)}
                ></DModal>
                <DLookImages status={companycar.itemStatus} url={companycar.itemUrl} onLookHandle={this.onLookItem.bind(this)}></DLookImages>
            </View>
        )
    }
}